<html>
<head>
    <script type="module">
        import { store as speechStore } from "/components/chat/speech/speech-store.js";
        import { store as attachmentsStore } from "/components/chat/attachments/attachmentsStore.js";
        import { store as fullScreenStore } from "/components/modals/full-screen-input/full-screen-store.js";
    </script>
</head>
<body>
    <div class="input-row">
        <!-- Attachment icon with tooltip -->
        <div class="attachment-wrapper" x-data="{ showTooltip: false }">
            <label for="file-input" class="attachment-icon" @mouseover="showTooltip = true" @mouseleave="showTooltip = false">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
                </svg>
            </label>
            <input type="file" id="file-input" accept="*" multiple style="display: none" @change="$store.chatAttachments.handleFileUpload($event)">

            <div x-show="showTooltip" class="tooltip">Add attachments to the message</div>
        </div>

        <!-- Container for textarea and expand button -->
        <div id="chat-input-container" style="position: relative;">
            <textarea id="chat-input" placeholder="Type your message here..." rows="1"
+                     @keydown.enter="if (!$event.shiftKey && !$event.isComposing && $event.keyCode !== 229) { $event.preventDefault(); $store.chatInput.sendMessage(); }"
                      @input="$store.chatInput.adjustTextareaHeight()"></textarea>
            <button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
                </svg>
            </button>
        </div>

        <div id="chat-buttons-wrapper">
            <!-- Send button -->
            <button class="chat-button" id="send-button" aria-label="Send message"
                    @click="$store.chatInput.sendMessage()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M25 20 L75 50 L25 80" fill="none" stroke="currentColor" stroke-width="15"></path>
                </svg>
            </button>

            <!-- Microphone button -->
            <button class="chat-button mic-inactive" id="microphone-button" aria-label="Start/Stop recording"
                    @click="$store.speech.handleMicrophoneClick()" x-effect="$store.speech.updateMicrophoneButtonUI()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18" fill="currentColor">
                    <path d="m8,12c1.66,0,3-1.34,3-3V3c0-1.66-1.34-3-3-3s-3,1.34-3,3v6c0,1.66,1.34,3,3,3Zm-1,1.9c-2.7-.4-4.8-2.6-5-5.4H0c.2,3.8,3.1,6.9,7,7.5v2h2v-2c3.9-.6,6.8-3.7,7-7.5h-2c-.2,2.8-2.3,5-5,5.4h-2Z" />
                </svg>
            </button>
        </div>
    </div>

    <!-- Full Screen Input Modal -->
    <x-component path="modals/full-screen-input/full-screen-input.html"></x-component>


    <style>
    /* Layout rows */
    .input-row { display: flex; align-items: center; gap: var(--spacing-xs); width: 100%; white-space: nowrap; }
    
    /* Attachments icon + tooltip */
    .attachment-wrapper { position: relative; flex-shrink: 0; }
    .attachment-icon { cursor: pointer; color: var(--color-text); opacity: 0.7; transition: opacity 0.2s ease; display: flex; align-items: center; }
    .attachment-icon:hover { opacity: 1; }
    .attachment-icon:active { opacity: 0.5; }
    .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(0%); padding: 8px; background-color: var(--color-secondary); color: var(--color-text); border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 1002; }

/* Text input */
    #chat-input-container {
    position: relative;
    width: 100%;
    }
    #chat-input {
    background-color: var(--color-input);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    flex-grow: 1;
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    -webkit-font-optical-sizing: auto;
    font-size: 0.9rem;
    max-height: 7rem;
    min-height: 3.05rem;
    width: 100%;
    padding: 0.48rem 40px var(--spacing-sm) var(--spacing-sm);
    margin-right: var(--spacing-xs);
    overflow-y: auto;
    scroll-behavior: smooth;
    resize: none;
    align-content: start;
    background-clip: border-box;
    border: 6px solid transparent;
    outline: 1px solid var(--color-border);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    }
    #chat-input::-webkit-scrollbar { width: 6px; height: 6px; }
    #chat-input::-webkit-scrollbar-track { background: transparent; margin: 4px 0; border-radius: 6px; }
    #chat-input::-webkit-scrollbar-thumb { background-color: rgba(155,155,155,0.5); border-radius: 6px; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; }
    #chat-input::-webkit-scrollbar-thumb:hover { background-color: rgba(155,155,155,0.7); }
    #chat-input:focus { outline: 0.05rem solid rgba(155,155,155,0.5); font-size: 0.955rem; padding-top: 0.45rem; background-color: var(--color-input-focus); }
    #chat-input::placeholder { color: var(--color-text-muted); opacity: 0.7; }

    #expand-button { position: absolute; top: 12px; right: 10px; background: transparent; border: none; cursor: pointer; font-size: 1.2rem; color: var(--color-text); opacity: 0.4; transition: opacity 0.2s; }
    #expand-button:hover { opacity: 0.7; }
    #expand-button:active { opacity: 1; }
    #expand-button svg { width: 1.3rem; height: 1.3rem; }

    /* Chat buttons (Send/Mic) */
    #chat-buttons-wrapper { gap: var(--spacing-xs); padding-left: var(--spacing-xs); line-height: 0.5rem; display: -webkit-flex; display: flex; }
    .chat-button { border: none; border-radius: 50%; color: var(--color-background); cursor: pointer; font-size: var(--font-size-normal); height: 2.525rem; width: 2.525rem; margin: 0 0.18rem 0 0 var(--spacing-xs); display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-grow: 0; min-width: 2.525rem; -webkit-transition: all var(--transition-speed), transform 0.1s ease-in-out; transition: all var(--transition-speed), transform 0.1s ease-in-out; }
    #send-button { background-color: #4248f1; }
    #send-button:hover { -webkit-transform: scale(1.05); transform: scale(1.05); transform-origin: center; background-color: #353bc5; }
    #send-button:active { -webkit-transform: scale(1); transform: scale(1); transform-origin: center; background-color: #2b309c; }
    .chat-button svg { width: 1.5rem; height: 1.5rem; }
    /* Microphone button */
    .chat-button.mic-inactive svg { /* Add specific styles if needed */ }
    /* Tooltip */
    .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(0%); padding: 8px; background-color: var(--color-secondary); color: var(--color-text); border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 1002; }
    /* Responsive tweaks */
    @media (max-width: 640px) {
      #chat-input { min-height: 5.3rem; align-content: start; }
      #chat-buttons-wrapper { display: flex; gap: var(--spacing-xs); padding: 0 0 0 var(--spacing-sm) !important; width: 3.5rem; flex-wrap: wrap; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
    }
    @media (min-width: 768px) { #chat-buttons-wrapper { flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } }
    </style>
</body>
</html>

